import React, { useState, useEffect } from 'react';
import { userService } from '../services/userService';

const UserManagement = () => {
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        loadUsers();
    }, []);

    const loadUsers = async () => {
        try {
            const userData = await userService.getAllUsers();
            setUsers(userData);
        } catch (err) {
            setError('加载用户列表失败');
        } finally {
            setLoading(false);
        }
    };

    if (loading) return <div>加载中...</div>;
    if (error) return <div>{error}</div>;

    return (
        <div className="user-management">
            <h2>用户管理</h2>
            <table>
                <thead>
                    <tr>
                        <th>用户名</th>
                        <th>权限</th>
                        <th>昵称</th>
                        <th>手机号</th>
                        <th>邮箱</th>
                    </tr>
                </thead>
                <tbody>
                    {users.map(user => (
                        <tr key={user.username}>
                            <td>{user.username}</td>
                            <td>{user.permission}</td>
                            <td>{user.nickname}</td>
                            <td>{user.phone}</td>
                            <td>{user.email}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
};

export default UserManagement; 